import React from 'react';
import { observer } from 'mobx-react';
import {  Table } from 'antd';
import {LogListStore} from "../../stores/list/LogListStore";
import { WeaDialog,WeaLocaleProvider } from "ecCom";
const getLabel = WeaLocaleProvider.getLabel;

export interface LogListProps {
    cubeLogList: LogListStore;
}

@observer
export default class MainFieldLog extends React.Component<LogListProps, any> {

    render() {
        const { cubeLogList } = this.props;
        const columns = [
            { title: getLabel(31644, '字段名'), dataIndex: 'fieldlabelname', key: 'fieldlabelname', width: '25%', },
            {
                title: getLabel(82276, '字段值(当前修改)'),
                dataIndex: 'fieldvalue',
                key: 'fieldvalue',
                width: '25%',
                render: (_, record) => (
                    <div dangerouslySetInnerHTML={{ __html: record.fieldvalue }} />
                )
            },
            {
                title: getLabel(82277, '字段值(修改前)'),
                dataIndex: 'prefieldvalue',
                key: 'prefieldvalue',
                width: '25%',
                render: (_, record) => (
                    <div dangerouslySetInnerHTML={{ __html: record.prefieldvalue }} />
                )
            },
            {
                title: getLabel(104, '操作'),
                dataIndex: 'operation',
                key: 'operation',
                width: '25%',
                render: (_, record) => (
                    <span className={'table-operation'}>
                        <a href="javascript:void(0)" onClick={() => cubeLogList.showCodeAllLog(record.fieldid, record.fieldlabelname)}>{getLabel(82278, '查看该字段所有日志')}</a>
                    </span>
                ),
            },
        ];

        return (
            <Table
                columns={columns}
                className="cube-log-list-table"
                dataSource={cubeLogList.mainLog_data}
                pagination={false}
            />
        );
    }
}


@observer
export class MainFieldLogDialog extends React.Component<LogListProps, any> {
    render() {
        const { cubeLogList } = this.props;
        const {iconInfo}=cubeLogList;
        return (
            <WeaDialog
                onCancel={()=>cubeLogList.mainLog_visible=false}
                title={getLabel(82274,"字段日志")}
                visible={cubeLogList.mainLog_visible}
                iconBgcolor={iconInfo.iconBg || "#96358a"}
                icon={iconInfo.icon ||'icon-coms-ModelingEngine'}
                iconFontColor={iconInfo.iconColor || "#fff"}
                style={{ width: 800, height: 560 }}
                hasScroll
            >
                {cubeLogList.mainLog_visible && <MainFieldLog cubeLogList={cubeLogList} />}
            </WeaDialog>
        )
    }
}